<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>TreeV2 虚拟化树形控件</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">不论你的数据量多大，虚拟树都能毫无压力地处理。</p>
	<p class="desc">基础的树形结构展示</p>
	<el-tree-v2 :data="data" :props="props" :height="300"></el-tree-v2>
	
	
	<el-divider content-position="left">其他用法</el-divider><!-- =============================================================== -->
	<p class="desc">虚拟化树形控件用得少，暂不深入研究</p>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			data: null,
			props: {
				value: 'id',
				label: 'label',
				children: 'children',
			},
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			this.data = this.createData(4, 30, 40);
			// console.log(this.data);
		})
	},
	methods:{
		getKey(prefix, id){
			return `${prefix}-${id}`;
		},
		createData(maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node'){
			let id = 0;
			return Array.from({ length: minNodesNumber }).map(() => {
				const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
				const nodeKey = this.getKey(key, ++id);
				return {
					id: nodeKey,
					label: nodeKey,
					children: childrenNumber ? this.createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey) : undefined,
				}
			})
		},
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>